<%@ page session="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" href="<c:url value="/styles/bootstrap/3.3.5/css/bootstrap.min.css" />" />
    <link rel="stylesheet" href="<c:url value="/styles/bootstrap/3.3.5/css/bootstrap-theme.min.css" />" />
    <link rel="stylesheet" href="<c:url value="/styles/pivotal.css" />" />
	<title>
		<fmt:message key="accounts.show.title"/>
	</title>
</head>
<body>

	<div class="container">
		<div class="row">
			<nav class="navbar navbar-inverse">
				<div class="container-fluid">
					<div class="navbar-header">
						<a title="Spring IO" href="http://www.spring.io"> 
							<img src="<c:url value="/images/spring-trans-dark.png"/>" height="50"/>
						</a>
					</div>
					<div>
						<ul class="nav navbar-nav">
						<li><a href="<c:url value="/"/>"><fmt:message
									key="navigate.home" /></a></li>
						<li>
						    <a href="<c:url value="/accounts"/>"><fmt:message key="navigate.accounts" /></a>
						</li>
						</ul>
						<ul class="nav navbar-nav navbar-right">
							<li>
								<a href="http://www.pivotal.io">
									<img alt="Pivotal" title="Pivotal" height="20" src="<c:url value="/images/pivotal-logo-600.png" />" />
								</a>
							</li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
		
		<div class="row">

			<h1>
				<fmt:message key="accounts.show.title" />
			</h1>
			
			<div class="container-fluid">
				<div class="row">
					<div class="col-sm-3">
						<fmt:message key="label.Account.number" />
					</div>
					<div class="col-sm-9">
						${account.number}
					</div>
				</div>
				<div class="row">
					<div class="col-sm-3">
						<fmt:message key="label.Account.name" />
					</div>
					<div class="col-sm-9">
						${account.name}
					</div>
				</div>
				<div class="row">
					<div class="col-sm-3">
						<fmt:message key="label.Account.dateOfBirth"/>
					</div>
					<div class="col-sm-9">
						<fmt:formatDate value="${account.dateOfBirth}" />
					</div>
				</div>
				<div class="row">
					<div class="col-sm-3">
						<fmt:message key="label.Account.email" />
					</div>
					<div class="col-sm-9">
						${account.email}
					</div>
				</div>
				<div class="row">
					<div class="col-sm-3">
						<fmt:message key="label.Account.receiveNewsletter" />
					</div>
					<div class="col-sm-9">
						<fmt:message key="label.${account.receiveNewsletter}" />
					</div>
				</div>
				<div class="row">
					<div class="col-sm-3">
						<fmt:message key="label.Account.receiveMonthlyEmailUpdate" /> 
					</div>
					<div class="col-sm-9">
						<fmt:message key="label.${account.receiveMonthlyEmailUpdate}" />			
					</div>
				</div>
			</div>
			
			
			<div>
				<h2>
					<fmt:message key="label.Account.beneficiaries" />
				</h2>
				<c:if test="${!empty account.beneficiaries}">
							<table class="table">
								<thead>
									<tr>
										<th>
											<fmt:message key="label.Account.beneficiaries.name" />
										</th>
										<th>
											<fmt:message key="label.Account.beneficiaries.allocationPercentage" />
										</th>
										<th>
											<fmt:message key="label.Account.beneficiaries.savings" />
										</th>
									</tr>
								</thead>
								<tbody>
									<c:forEach var="beneficiary" items="${account.beneficiaries}">
										<tr>
											<td>${beneficiary.name}</td>
											<td>${beneficiary.allocationPercentage}</td>
											<td>${beneficiary.savings}</td>
										</tr>
									</c:forEach>
								</tbody>
							</table>
				</c:if>
				<c:if test="${empty account.beneficiaries}">
					<fmt:message key="accounts.show.label.noBeneficaries" />
				</c:if>
			</div>
			
		</div>
		
		<div class="row">
			<p><fmt:message key="footer.message"/></p>
		</div>
		
	</div>
</body>
</html>